<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body {
      height: 2000px;
      /* подсказка должна работать и после прокрутки страницы */
    }

    .tooltip {
      position: fixed;
      z-index: 100;

      padding: 10px 20px;

      border: 1px solid #b3c9ce;
      border-radius: 4px;
      text-align: center;
      font: italic 14px/1.3 sans-serif;
      color: #333;
      background: #fff;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, .3);
    }

    #house {
      margin-top: 50px;
      width: 400px;
      border: 1px solid brown;
    }

    #roof {
      width: 0;
      height: 0;
      border-left: 200px solid transparent;
      border-right: 200px solid transparent;
      border-bottom: 20px solid brown;
      margin-top: -20px;
    }

    p {
      text-align: justify;
      margin: 10px 3px;
    }
  </style>
</head>

<body>


  <div data-tooltip="Здесь домашний интерьер" id="house">
    <div data-tooltip="Здесь крыша" id="roof"></div>

    <p>Жили-были на свете три поросенка. Три брата. Все одинакового роста, кругленькие, розовые, с одинаковыми веселыми хвостиками.</p>

    <p>Даже имена у них были похожи. Звали поросят: Ниф-Ниф, Нуф-Нуф и Наф-Наф. Все лето они кувыркались в зеленой траве, грелись на солнышке, нежились в лужах.</p>

    <p>Но вот наступила осень. Солнце уже не так сильно припекало, серые облака тянулись над пожелтевшим лесом.</p>

    <p>- Пора нам подумать о зиме, - сказал как-то Наф-Наф. <a href="https://ru.wikipedia.org/wiki/%D0%A2%D1%80%D0%B8_%D0%BF%D0%BE%D1%80%D0%BE%D1%81%D1%91%D0%BD%D0%BA%D0%B0" data-tooltip="Читать далее…">Наведи курсор на меня</a></p>

  </div>

  <script>
    let tooltip;

    document.onmouseover = function(event) {
      // важно: быстро движущийся курсор может прыгнуть сразу к дочернему элементу, пропустив родительский
      // так что событие mouseover произойдёт сразу на дочернем элементе.

      let anchorElem = event.target.closest('[data-tooltip]');

      if (!anchorElem) return;

      // показываем подсказку и запоминаем её
      tooltip = showTooltip(anchorElem, anchorElem.dataset.tooltip);
    }

    document.onmouseout = function() {
      // возможно такое, что произошло событие mouseout, но мы всё ещё внутри элемента
      // (оно было где-то внутри и всплыло)
      // но в этом случае сразу же последует событие mouseover,
      // то есть подсказка исчезнет и потом снова покажется
      //
      // к счастью, этого не будет видно,
      // так как оба события происходят почти одновременно
      if (tooltip) {
        tooltip.remove();
        tooltip = false;
      }

    }


    function showTooltip(anchorElem, html) {
      let tooltipElem = document.createElement('div');
      tooltipElem.className = 'tooltip';
      tooltipElem.innerHTML = html;
      document.body.append(tooltipElem);

      let coords = anchorElem.getBoundingClientRect();

      // позиционируем подсказку над центром элемента
      let left = coords.left + (anchorElem.offsetWidth - tooltipElem.offsetWidth) / 2;
      if (left < 0) left = 0;

      let top = coords.top - tooltipElem.offsetHeight - 5;
      if (top < 0) {
        top = coords.top + anchorElem.offsetHeight + 5;
      }

      tooltipElem.style.left = left + 'px';
      tooltipElem.style.top = top + 'px';

      return tooltipElem;
    }


  </script>

</body>
</html>
